<!--无疆泡泡豚监控后台首页-->
<template>
  <div class="index-container">
    <!--地图区域-->
    <div id="map-container"></div>
    <div class="bm-control">
      <div class="center-title">
        <span>全国景区分布图</span>
      </div>
    </div>
  </div>
</template>

<script>
import {listScenic} from "@/api/system/scenic"
import {bd09towgs84, wgs84tobd09} from "@/utils/gps";


export default {
  name: 'Index',
  data() {
    return {
      map: undefined,
      curZoom: undefined,
      // 版本号
      version: "1.0.0",
      scenicArr: [], //所有景区对象数组
      scenicItemArr: [], //所有至少包含一个码头的景区对象数组
    };
  },
  mounted() {

    //东湖码头：114.414963,30.560085
    //梁子湖码头：114.573217,30.259371
    //千岛湖码头：118.995508,29.596349
    let translated1 = bd09towgs84(114.414963, 30.560085)
    let translated2 = bd09towgs84(114.573217, 30.259371)
    let translated3 = bd09towgs84(118.995508, 29.596349)
    console.log("translated1: ", translated1)
    console.log("translated2: ", translated2)
    console.log("translated3: ", translated3)


    listScenic().then(res => {
      this.scenicArr = res.data;
      console.log("this.scenicArr: ", this.scenicArr)
    }).catch(err => {
      console.log("listScenic err: ", err)
    }).finally(() => {
      this.initMap();
    })

  },
  methods: {
    /**
     * 初始化地图。
     */
    initMap() {
      console.log("initMap execute.")
      //设置区域点，map根据这些点计算出合适的中心点和地图缩放级别。
      var leftTopPoint = new BMapGL.Point(114.181357, 30.571459);
      var leftBottomPoint = new BMapGL.Point(114.180422, 30.551775);
      var rightTopPoint = new BMapGL.Point(114.21118, 30.565769);
      var rightBottomPoint = new BMapGL.Point(114.210426, 30.555258);
      var centerPoint = new BMapGL.Point(114.192675, 30.560172);

      let centerPointArr = []; //地图中心点坐标集合。map根据这些点计算出合适的中心点和地图缩放级别。

      // let icon = new BMapGL.Icon("/img/scenic-icon.png", new BMapGL.Size(32, 32), {anchor: new BMapGL.Size(8, -10)});
      let icon = new BMapGL.Icon("/img/scenic-icon.png", new BMapGL.Size(32, 32));
      this.scenicArr.forEach((scenic, index) => {
        let wharfList = scenic.wharfList;
        if (wharfList.length > 0) {
          let firstWharf = wharfList[0];
          let lat = firstWharf.lat;
          let lon = firstWharf.lon;
          let scenicItem = {};
          scenicItem.scenicId = scenic.scenicId;
          scenicItem.scenicName = scenic.scenicName;
          scenicItem.scenicShortName = scenic.scenicShortName;
          scenicItem.firstWharfLat = lat;
          scenicItem.firstWharfLng = lon;
          let translatedPoint = wgs84tobd09(lon, lat);
          scenicItem.firstWharfBdLat = translatedPoint[1];
          scenicItem.firstWharfBdLng = translatedPoint[0];
          let point = new BMapGL.Point(translatedPoint[0], translatedPoint[1]);
          centerPointArr.push(point);
          // 创建码头点覆盖物
          let markerOverlay = new BMapGL.Marker(point, {
            icon: icon,
            title: "点击跳转到景区监控中心"
          });
          markerOverlay.addEventListener("click", function (e) {
            console.log("被点击, e: ", e)
          })
          scenicItem.markerOverlay = markerOverlay;

          // 创建码头文本标记覆盖物
          let labelOverlay = new BMapGL.Label(scenic.scenicShortName + "111", {
            position: point,
            offset: new BMapGL.Size(10, 20)
          });
          //设置label的样式
          labelOverlay.setStyle({
            color: '#000',
            fontSize: '14px',
            border: '2px solid #1E90FF'
          })
          scenicItem.labelOverlay = labelOverlay;

          this.scenicItemArr.push(scenicItem);
        }
      })

      if (centerPointArr.length === 0) {
        centerPointArr.push(new BMapGL.Point(116.404269, 39.917813)); //默认坐标点为北京天安门
      }

      console.log("centerPointArr: ", centerPointArr)

      this.map = new BMapGL.Map('map-container', {
        minZoom: 0,
        maxZoom: 21
      });

      var viewport = this.map.getViewport(centerPointArr, {
        zoomFactor: 0
      });

      this.curZoom = viewport.zoom;

      this.map.centerAndZoom(viewport.center, this.curZoom);
      this.map.enableScrollWheelZoom(true);

      var that = this;
      fetch("../map/custom_map_config.json")
        .then(res => {
          console.log("fetch res: ", res)
          if (res.status === 200) {
            //json()是返回的Response对象提供的一个异步方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了。
            // 注意：json()方法只能调用一次，后面再次调用将无法获取到数据。
            var promiseJson = res.json();
            // console.log("res promiseJson= ", promiseJson)
            return promiseJson
          } else {
            return {}
          }
        })
        .then(text => {
          // console.log("setMapStyleV2, text= ", text)
          // console.log("fetch this= ", this) //此处的this就是当前vue组件
          that.map.setMapStyleV2({
            styleJson: text
          })

        });

      // 添加比例尺控件
      var scaleCtrl = new BMapGL.ScaleControl({
        offset: new BMapGL.Size(1500, 10)
      });
      this.map.addControl(scaleCtrl);
      // 添加地图缩放控件
      // var zoomCtrl = new BMapGL.ZoomControl({
      //   offset: new BMapGL.Size(540, 15)
      // });
      // this.map.addControl(zoomCtrl);

      //添加全国景区点覆盖物
      if (this.scenicItemArr.length > 0) {
        for (let i = 0; i < this.scenicItemArr.length; i++) {
          let markerOverlay = this.scenicItemArr[i].markerOverlay;
          let labelOverlay = this.scenicItemArr[i].labelOverlay;
          if (markerOverlay) {
            this.map.addOverlay(markerOverlay);
          }
          if (labelOverlay) {
            this.map.addOverlay(labelOverlay);
          }
        }
      }
    },
  }
}
</script>

<style lang="css" scoped>
.index-container {
  position: relative;
  width: calc(100vw - 200px);
  height: calc(100vh - 84px);
  padding-left: 2px;
}

#map-container {
  width: 100%;
  height: 100%;
}

.bm-control {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 10px;
  left: 5px;
  width: 100%;
  z-index: 100;

}

.center-title {
  margin: 3px auto;
  color: #f8f8fa;
  font-size: 24px;
  font-weight: 700;
  /*background-color: yellow;*/
}

</style>
